<template>
  <!-- <div style="height:540px"> -->
  <div style="">
    <div class="fontWeight biaoti">企业佣金统计<el-tooltip class="item" effect="dark" content="只支持查询一年内的数据" placement="right"><i class="el-icon-question tipQuestion"></i></el-tooltip><span class="m20 font12 text-999">数据更新时间：{{ Time }}</span></div>
    <div class="mt20 mb82">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item prop="companyId">
              <el-select style="width:200px" v-model="queryParams.companyId" class="mr10" placeholder="请选择客户企业" clearable filterable @change="change">
                <el-option
                  v-for="dict in companyOperationSelect"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="operationIds" v-if="isShow">
              <el-select  style="width:220px" v-model="queryParams.operationIds" multiple collapse-tags placeholder="请选择账号" clearable  filterable>
                <el-option
                  v-for="dict in account"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
          </el-form-item>
          </el-form>
          <el-form :model="queryParams" ref="queryForm" :inline="true">  
            <el-form-item prop="startDate">
              <el-date-picker
              style="width:135px"
              v-model="queryParams.startDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始日期"
              :editable="false"
              :clearable="false"
              :picker-options="pickerOptions"
              >
              </el-date-picker>
          </el-form-item>
          <el-form-item>-</el-form-item>
            <!-- <span style="padding:7px 5px">-</span> -->
          <el-form-item prop="endDate">
              <el-date-picker
              style="width:135px"
              v-model="queryParams.endDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="结束日期"
              :editable="false"
              :clearable="false"
              :picker-options="pickerOptions"
              >
              </el-date-picker>
          </el-form-item>
          <el-form-item>
            <!-- <el-button type="primary" icon="el-icon-search" size="medium" @click="handleQuery" style="padding:10px">搜索</el-button> -->
            <el-button icon="el-icon-search" size="medium" @click="handleQuery"  style="padding:10px">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
   </div>
  <!-- <div :class="className" :style="{height:height,width:width}" /> -->
  <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div style="height:176px;width:100%" id="myChart_sucess"></div>
        <el-col :xs="12" :sm="12" :lg="12" class="mt30 mb30">
             <p class="p1">成功金额({{ successMoneyDW }}元)</p>
             <p class="p2">{{ successMoney }}</p>
        </el-col>
         <el-col :xs="12" :sm="12" :lg="12" class="mt30 mb30">
             <p class="p1">失败金额({{ failMoneyDW }}元)</p>
             <p class="p2">{{ failMoney }}</p>
        </el-col>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div style="height:176px;width:100%" id="myChart_fail"></div>
        <el-col :xs="12" :sm="12" :lg="12" class="mt30 mb30">
             <p class="p1">成功笔数(笔)</p>
             <p class="p2">{{ successCount }}</p>
        </el-col>
         <el-col :xs="12" :sm="12" :lg="12" class="mt30 mb30">
             <p class="p1">失败笔数(笔)</p>
             <p class="p2">{{ failCount }}</p>
        </el-col>
      </el-col>
  </el-row>


  <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="10">
          <div style="height:180px;width:100%" id="myChart_sucess"></div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="14">
          <div class="flex justify-content align-items-center rightTips">
              <div style="width:50%">
                <p class="p1">成功</p>
                <p class="p2">{{ successMoney }}</p>
              </div>
              <div style="width:50%">
                <p class="p1">失败</p>
                <p class="p2">{{ failMoney }}</p>
              </div>
          </div>
      </el-col>
  </el-row>
  <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="10">
          <div style="height:180px;width:100%" id="myChart_fail"></div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="14">
          <div class="flex justify-content align-items-center rightTips">
              <div style="width:50%">
                <p class="p1">成功</p>
                <p class="p2">{{ successCount }}</p>
              </div>
              <div style="width:50%">
                <p class="p1">失败</p>
                <p class="p2">{{ failCount }}</p>
              </div>
          </div>
      </el-col>
  </el-row>       -->
    <!-- <div>
      <div class="flex align-items-center">
          <div style="height:180px;width:40%" id="myChart_sucess"></div>
          <div class="flex justify-content" style="width:60%">
              <div style="width:50%">
                <p class="p1">成功</p>
                <p class="p2">{{ successMoney }}</p>
              </div>
              <div style="width:50%">
                <p class="p1">失败</p>
                <p class="p2">{{ failMoney }}</p>
              </div>
          </div>
      </div>
      <div class="flex align-items-center">
          <div style="height:180px;width:40%" id="myChart_fail"></div>
          <div class="flex justify-content" style="width:60%">
              <div style="width:50%">
                <p class="p1">成功</p>
                <p class="p2">{{ successCount }}</p>
              </div>
              <div style="width:50%">
                <p class="p1">失败</p>
                <p class="p2">{{ failCount }}</p>
              </div>
          </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { commissionCompanyTotal } from "@/api/index";

export default {
  mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '100px'
  //   }
  // },
  data() {
    return {
      chart: null,
      chart1: null,
      isShow: false,
      Time: null,
     // 查询参数
      queryParams: {
        companyId: undefined,
        operationIds: undefined,
        startDate: undefined,
        endDate: undefined,
      },
      pickerOptions: {
            disabledDate(time) {
                let curDate = (new Date()).getTime();
                let twelve = 365 * 24 * 3600 * 1000;
                let twelveMonths = curDate - twelve;
                return time.getTime() > Date.now() || time.getTime() < twelveMonths;
            }
      },
     companyOperationSelect: [], // 所有客户企业下拉列表信息数据字典数据
     account:[],
     successMoney:0,
     successMoneyDW:'',

     failMoney:0,
     failMoneyDW:'',

     totalMoney:0,
     successCount:0,
     failCount:0,
     totalCount:0
    }
  },
  mounted() {
    this.$nextTick(() => {
      //this.initChart()
      this.getList()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null

    if (!this.chart1) {
      return
    }
    this.chart1.dispose()
    this.chart1 = null
  },
  created() {
    this.getCompanyOperationSelect().then(response => {
      this.companyOperationSelect = response.data;
    });
    this.getStartDateValue();
    this.getEndDateValue();
    this.getDateTime();
  },
  methods: {
    getDateTime(){
      var day = new Date();
      day.setTime(day.getTime()-24*60*60*1000);
      this.Time = day.getFullYear() + "-" + (day.getMonth()+1 < 10 ? '0'+(day.getMonth()+1) : day.getMonth()+1) + "-" + (day.getDate() < 10 ? '0'+(day.getDate()) : day.getDate());
    },
    getStartDateValue(){
          var now = new Date();
          var year = now.getFullYear() -1;// 得到年份
          var month = now.getMonth(); // 得到月份
          var date = now.getDate(); // 得到日期
          var month = month + 1;
          var month = month.toString().padStart(2, '0');
          var date = date.toString().padStart(2, '0');
          var defaultDate = `${year}-${month}-${date}`;
          this.queryParams.startDate = defaultDate;
    },
    getEndDateValue(){
          var now = new Date()
          var year = now.getFullYear() // 得到年份
          var month = now.getMonth() // 得到月份
          var date = now.getDate() // 得到日期
          month = month + 1
          month = month.toString().padStart(2, '0')
          date = date.toString().padStart(2, '0')
          var defaultDate = `${year}-${month}-${date}`
          this.queryParams.endDate = defaultDate
    },
    change(e){
      delete this.queryParams.operationIds
      if(e){
        this.isShow = true;
        this.account = this.companyOperationSelect.filter(item => item.id === e)[0].children;
      }else{
        this.isShow = false
      }
    },
    getList() {
      commissionCompanyTotal(this.queryParams).then((response) => {
          //this.successMoney = response.data.successMoney;       // 成功金额
          //this.failMoney = response.data.failMoney;          // 失败金额
          //this.totalMoney = parseFloat(response.data.totalMoney/10000).toFixed(2)+'w';         // 总金额 parseFloat(failMoney/10000).toFixed(2)
          if (response.data.successMoney >= 100000000) {
            this.successMoney = parseFloat(response.data.successMoney / 100000000).toFixed(2);
            this.successMoneyDW = '亿';
          } else if (response.data.successMoney >= 10000) {
            this.successMoney = parseFloat(response.data.successMoney/10000).toFixed(2);
            this.successMoneyDW = '万';
          } else {
            this.successMoney = response.data.successMoney;
          }

          if (response.data.failMoney >= 100000000) {
            this.failMoney = parseFloat(response.data.failMoney / 100000000).toFixed(2);
            this.failMoneyDW = '亿';
          } else if (response.data.failMoney >= 10000) {
            this.failMoney = parseFloat(response.data.failMoney/10000).toFixed(2);
            this.failMoneyDW = '万';
          } else {
            this.failMoney = response.data.failMoney;
          }

          if (response.data.totalMoney >= 100000000) {
            this.totalMoney = parseFloat(response.data.totalMoney / 100000000).toFixed(2) + "亿";
          } else if (response.data.totalMoney >= 10000) {
            this.totalMoney = parseFloat(response.data.totalMoney/10000).toFixed(2) + "万";
          } else {
            this.totalMoney = response.data.totalMoney;
          }


          this.successCount = response.data.successCount;      //成功笔数
          this.failCount = response.data.failCount;         //失败笔数
          this.totalCount = response.data.totalCount;        //总笔数
          this.chart = echarts.init(document.getElementById('myChart_sucess'), 'macarons')
          this.chart.setOption({
            title: {
              left: 'center',
              text: ['{value|' + this.totalMoney + '}', '{name|总金额}'].join('\n'),
              top: '35%',
              textStyle: {
                    rich: {
                        value: {
                            color: '#333',
                            fontSize: 16,
                            lineHeight: 25,
                            fontWeight: 'bold',
                        },
                        name: {
                            color: '#333',
                            fontSize: 14,
                            lineHeight: 25,
                            fontWeight: 'bold',
                        },
                    },
                },
            },
            tooltip: {
              trigger: 'item',
              //formatter: '{a} <br/>{b}: {c} ({d}%)',
              formatter: function (params) {
                  if (params.value >= 100000000) {
                    return parseFloat(params.value / 100000000).toFixed(2) + "亿";
                  } else if (params.value >= 10000) {
                    return parseFloat(params.value / 10000).toFixed(2) + "万";
                  } else {
                    return params.value;
                  }
              },
            },
            
            series: [
                {
                    name: '金额',
                    type: 'pie',
                    radius: ['70%', '100%'],
                    minAngle: 15,//最小角度
                    startAngle:360, //起始角度
                    hoverAnimation: false,
                    avoidLabelOverlap: false,
                    itemStyle: {
                          normal: {
                              color: function(params) {
                                  var colorList = ['#045aff','#a2cdff'];
                                  return colorList[params.dataIndex]
                              }
                          }
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                        }
                    },
                  
                    data: [
                        {value: response.data.successMoney, name: '成功'},
                        {value: response.data.failMoney, name: '失败'},
                    
                    ],
                    animationEasing: 'cubicInOut',
                    animationDuration: 2600
                }
              ]
          })
          this.chart1 = echarts.init(document.getElementById('myChart_fail'), 'macarons')
          this.chart1.setOption({
            title: {
              left: 'center',
              text: ['{value|' + this.totalCount + '}', '{name|总笔数}'].join('\n'),
              top: '35%',
              textStyle: {
                    rich: {
                        value: {
                            color: '#333',
                            fontSize: 16,
                            lineHeight: 25,
                            fontWeight: 'bold',
                        },
                        name: {
                            color: '#333',
                            fontSize: 14,
                            lineHeight: 25,
                            fontWeight: 'bold',
                        },
                    },
                },
            },
            tooltip: {
              trigger: 'item',
              // formatter: '{a} <br/>{b}: {c} ({d}%)',
            },
            series: [
                {
                    name: '笔数',
                    type: 'pie',
                    radius: ['70%', '100%'],
                    minAngle: 15,//最小角度
                    startAngle:360, //起始角度
                    hoverAnimation: false,
                    avoidLabelOverlap: false,
                    itemStyle: {
                          normal: {
                              color: function(params) {
                                  var colorList = ['#ee2750','#ff94aa'];
                                  return colorList[params.dataIndex]
                              }
                          }
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false
                        }
                    },
                    data: [
                        {value: this.successCount, name: '成功'},
                        {value: this.failCount, name: '失败'},
                    
                    ],
                    animationEasing: 'cubicInOut',
                    animationDuration: 2600
                }
              ]
          })
      });
    },
    // initChart() {
      
    // },
    handleQuery() {
      this.getList();
    },
  }
}
</script>
<style  lang="scss">
    p{
      text-align: center;
      line-height: 10px;
    }
    p.p1{
      font-size: 14px;
      color: #666;
    }
    p.p2{
      font-size: 18px;
      color: #333;
      font-weight: bold;
    }
    
    @media screen and (max-width: 480px) {
      .el-select-dropdown{
        left: 0!important;
      }
      .mt30{
        margin-top: 5px;
      }
      .mb82{
        margin-bottom: 0;
      }
    }
</style>
